<template>
  <el-dialog
    :visible.sync="showPop"
    :close-on-click-modal="false"
    top="35vh"
  >
    <div class="pop-detail">
      <div class="close-icon" @click="showPop = false">
        <span>×</span>
      </div>
      <el-table :data="userList" border class="table">
        <el-table-column prop="name" label="姓名" align="center" width="150">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          align="center"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          align="center"
          show-overflow-tooltip
          :tooltip-effect="'dark'"
        >
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > queryParams.pageSize"
        :total="total"
        :page.sync="queryParams.currentPage"
        :limit.sync="queryParams.pageSize"
        @pagination="initTable"
        :layout="'prev, pager, next, jumper'"
      />
    </div>
  </el-dialog>
</template>

<script>
import { userStatisticsData } from "@/api/index";
export default {
  name: "userDeatil",
  data() {
    return {
      showPop: false, //用户详情弹窗
      // 查询参数
      queryParams: {
        pageSize: 15,
        currentPage: 1,
      },
      userList: [],
      total: 0,
    };
  },
  mounted() {},
  methods: {
    initTable() {
      userStatisticsData(this.queryParams).then((res) => {
        this.userList = res.data ?? [];
        this.total = res.totals;
      });
    },
    closePopup() {
      this.$emit("closePopup");
    },
    // 分页pageSize变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.initTable();
    },
    // 分页pageNum变化
    handleCurrentChange(val) {
      this.queryParams.currentPage = val;
      this.initTable();
    },
  },
};
</script>

<style scoped lang="scss">
.pop-detail {
  padding: 4vh 0.8vw 1.6vh 1.4vw;
  width: 38vw;
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -35%);
  z-index: 110;
  background: url("@/assets/image/popupbg2.png") no-repeat;
  background-size: 100% 100%;
  .close-icon {
    width: 0.18rem;
    height: 0.18rem;
    background-color: #a7caea;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000e36;
    font-weight: 700;
    position: absolute;
    right: 0.5vw;
    top: 1vh;
    cursor: pointer;
  }
  .table {
    width: 100%;
    height: 100%;
    min-height: 30vh;
    max-height: 50vh;
    overflow: auto;
  }
}
</style>
